<template>
  <div>
    <van-nav-bar title="地图" left-arrow fixed />

    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_CENTER"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <template v-if="flag">
         <bm-label
        v-for="(item, index) in list"
        :key="index"
        @click="clickFn(item)"
        :content="`${item.label}<br>${item.count}`"
        :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
        :labelStyle="{
          color: 'red',
          fontSize: '24px',
          borderRadius: '50%',
          width: '66.9px',
          height: '66.9px',
          textAlign: 'center',
        }"
        title="Hover me"
      />
      </template>

    </baidu-map>
    <van-popup v-model="show" position="bottom" :style="{ height: '10%',width:'100%' }" >
<!-- <ListI></ListI> -->
    </van-popup>
  </div>
</template>
<script>
import { searchMap } from '@/api/house'
export default {
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      list: [],
      flag: false,
      show: false
    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    },
    async clickFn (item) {
      console.log(item.value)
      this.center.lng = item.coord.longitude
      this.center.lat = item.coord.latitude
      this.flag = false
      this.zoom += 2
      const res = await searchMap(item.value)
      this.list = res.body
      this.flag = true
    }
  },
  async created () {
    const res = await searchMap('AREA|88cff55c-aaa4-e2e0')
    this.flag = true
    console.log(res)
    this.list = res.body
    console.log(this.list)
  }
}
</script>
<style scoped>
.map {
  width: 100%;
  height: 667px;
}
</style>
